<template>
  <div class='login'>
    <div class="header-title">
      加盟商账号验证
    </div>
    <form @submit="formSubmit">
      <div class="form-div ">
        <div>
          <label for="user">账号</label>
          <input type="number"
                 id="user"
                 maxlength='11'
                 name="cellphone"
                 v-model='userPhones'
                 placeholder="请输入11位手机号">
        </div>
        <div>
          <label for="code">验证码</label>
          <input type="number"
                 maxlength='6'
                 :focus='focusCode'
                 name="validCode"
                 placeholder="请输入验证码"
                 id="code">
          <div class="btn-code"
               @click="_getSmsCode"
               :class="[SmsStep<60?'color-font':'']"> {{SmsStep>=60?"获取验证码":SmsStep+"s"}}
          </div>
        </div>
      </div>
      <div class="btn-area">
        <mp-button :size="'large'"
                   :title="'账号登录'"
                   :font='36'
                   :form-type="'submit'"></mp-button>

      </div>
    </form>

  </div>

</template>

<script>
import MpButton from '@/components/button'
import { SaveBind, ValidCodeForBind } from '@/api/api'

export default {
  data () {
    return {

      focusCode: false,
      userPhones: '',
      SmsStep: 60
    }
  },
  components: {
    MpButton
  },

  computed: {},

  methods: {
    formSubmit: function (e) {
      console.log('form发生了submit事件，携带数据为：', e)
      let parameter = e.target.value
      if (this.$wx.testPhone(parameter['cellphone'])) {

      } else if (!parameter['validCode']) {
        this.$wx.textToast('请输入验证码')
      } else {
        SaveBind(parameter).then(res => {
          if (res) {
            this.$wx.switchTab('/pages/home/index')
          }
        })
      }
    },
    /**
     * 获取短信验证码
     * @private
     */
    async _getSmsCode () {
      let userPhone = this.userPhones
      let SmsStep = this.SmsStep
      let me = this

      if (this.$wx.testPhone(userPhone) || SmsStep < 60) { return }
      let resData = await ValidCodeForBind(userPhone)

      if (!resData) { return }
      me.focusCode = true
      let timer = setInterval(() => {
        me.SmsStep = SmsStep--
        if (me.SmsStep < 0) {
          clearInterval(timer)
          me.SmsStep = 60
          timer = null
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/common/scss/base.scss';

.login {
  padding: 0 38px;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

.header-title {
  padding: 136px 0 74px 0;
  @include fontSize(54);
  @include color111;
}

.form-div {
  > div {
    @include fjc(flex-start);
    @include fontSize(32);
    @include border-bottom($primaryColor);

    label {
      padding: 65px 20px 44px;
      min-width: 90px;
      white-space: nowrap;
      @include color666;
    }
    input {
      padding: 65px 10px 44px 0;
      @include color111;
    }
    .btn-code {
      min-width: 171px;
      width: initial;
      height: 64px;
      border-radius: 8px;
      background: #ffffff;
      white-space: nowrap;
      @include fontSize(31);
      @include fjc(center);
      @include border-all($lineColor, 8);
      padding: 0 10px;
      &:active {
        background-color: #dddddd;
      }
    }
    .color-font {
      color: $primaryColor;
      background: #dddddd;
    }
  }
}

.btn-area {
  padding-top: 114px;
}
</style>
